<template>
  <div style="height:100%;width:100%;position:relative;">
      <div>
          <div style="width:100%; height:35px; text-align:center;">
              <table>
                  <tr>
                      <td style="width:100px;"></td>
                      <td style="width:90%;">
                          <el-button icon="el-icon-message" type="primary" @click="sendMsgFunc(1)">发送</el-button>
                          <el-button icon="el-icon-notebook-2" @click="sendMsgFunc(0)">存为草稿</el-button>
                          <el-button icon="el-icon-takeaway-box" @click="getRecordDraft" :disabled="!getDraft">调出草稿</el-button>
                          <el-button icon="el-icon-close" @click="cancelSendMsg">取消</el-button>
                      </td>
                  </tr>
              </table>
          </div>
          <div style="width:100%;">
              <table style="width:95%">
                  <tr>
                      <td style="width:80px; text-align: right;">接收者</td>
                      <td>
                          <el-input style="width:95%;" readonly="readonly" v-model="sendMsgForm.receiver" placeholder="请选择接受者"></el-input>
                          <el-button style="width:5%; float: none; align-self: center;" @click="btnSelectPeople">选择</el-button>
                      </td>
                  </tr>
                  <tr>
                      <td style="width:80px; text-align: right;">消息主题</td>
                      <td>
                          <el-input style="width:100%;" v-model="sendMsgForm.title" placeholder="请输入消息标题"></el-input>
                      </td>
                  </tr>
                  <tr>
                      <td style="width:80px; text-align: right;">消息内容</td>
                      <td>
                          <el-upload v-show="false" id="quill-upload" action="#" name="upload_file" accept="*" :http-request="$imgAdd">
                              <el-button size="small" type="primary"></el-button>
                          </el-upload>
                          <div class="vue-quill-editor">
                              <quill-editor ref="myQuillEditor" v-model="sendMsgForm.content" :options="editorOption"></quill-editor>
                          </div>
                      </td>
                  </tr>
              </table>
          </div>
          <div style="width:100%;">
              <table>
                  <tr>
                      <td style="width:80px; text-align: right;">
                          消息类型
                      </td>
                      <td>
                          <rm-ddl-common datatype="seccode" kindno="MsgType" dataname="消息类型" @change="changeMsgtype" v-model="sendMsgForm.msgtype" width="100%"></rm-ddl-common>
                      </td>
                      <td style="width:160px; text-align: right;">
                          开始提醒时间
                      </td>
                      <td>
                          <el-date-picker v-model="sendMsgForm.noticeTime" type="datetime" placeholder="选择时间"></el-date-picker>
                      </td>
                      <td style="width:250px; text-align: right;">
                          <el-checkbox v-model="sendMsgForm.isCheck" size="medium" true-label="1" false-label="0">
                              接收人必须确认
                          </el-checkbox>
                      </td>
                  </tr>
                  <tr>
                      <td></td>
                      <td></td>
                      <td style="width:160px; text-align: right;">
                          提醒截止时间
                      </td>
                      <td>
                          <el-date-picker v-model="sendMsgForm.noticeEndTime" type="datetime" placeholder="选择时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                      </td>
                      <td><span style="color:red">*不填写截止时间代表该消息永久有效</span></td>
                  </tr>
              </table>
          </div>
          <!--选人弹窗-->
          <el-dialog :visible.sync="dialogSelectPeopleVisible" :show-close="true" class="sendmsgdial" title="选择消息接收者" width="1150px" append-to-body>
              <div class="selectpeople" style="width: 100%;height:440px">
                  <rm-layout-right :fixsize=910 :splitwidth=3 :minfixsize=200 :maxflxsize=1000>
                      <div class="tree" style="width:100%;">
                          <el-tree :props="treeProps" :load="loadNode" node-key="hospcode" ref="tree" lazy :highlight-current="true" @node-click="handleNodeClick"></el-tree>
                      </div>
                      <template v-slot:fix>
                          <div style="width:100%;">
                              <rm-SqlMultiple v-if="renderComponent" :leftOption="option1" :rightOption="option2" :name="fieldname" @change="closedialog" key="1"></rm-SqlMultiple>
                          </div>
                      </template>
                  </rm-layout-right>
              </div>
          </el-dialog>
          <!--选择草稿弹窗-->
          <el-dialog :visible.sync="dialogSelectDraftVisible" :show-close="true" title="草稿选取" width="830px" append-to-body>
              <div>
                  <table>
                      <tr>
                          <td style="width:90%;">
                              <el-button icon="el-icon-check" @click="getSelectDraft">确定</el-button>
                              <el-button icon="el-icon-close" @click="cancelSelectDraft">取消</el-button>
                          </td>
                      </tr>
                  </table>
              </div>
              <div>
                  <vxe-table :data.sync="draftTableData" border fit height="450px" whith="100%" header-align="center" highlight-current-row highlight-hover-row ref="draftTable" resizable show-header-overflow="tooltip" show-overflow="tooltip" size="mini" stripe @cell-dblclick="getSelectDraft">
                      <vxe-table-column field="msgtime" title="消息发布时间" text-align="center" width="160"></vxe-table-column>
                      <vxe-table-column field="msgtitle" title="消息标题" text-align="left" width="200"></vxe-table-column>
                      <vxe-table-column field="msgcontent" title="消息内容" text-align="left" width="250"></vxe-table-column>
                      <vxe-table-column field="reciever" title="接受者" text-align="left" width="200"></vxe-table-column>
                  </vxe-table>
              </div>
          </el-dialog>
      </div>
  </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor, Quill } from "vue-quill-editor";
// 设置字体大小
const fontSizeStyle = Quill.import("attributors/style/size"); // 引入这个后会把样式写在style上
fontSizeStyle.whitelist = ["12px", "14px", "16px", "18px", "20px", "24px", "28px", "32px", "36px"];
Quill.register(fontSizeStyle, true);

// 设置字体样式
const Font = Quill.import("attributors/style/font"); // 引入这个后会把样式写在style上
const fonts = ["Microsoft-YaHei", "SimSun", "SimHei", "KaiTi", "FangSong"];
Font.whitelist = fonts; // 将字体加入到白名单
Quill.register(Font, true);

// 工具栏
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  // [{ align: [] }], // 对齐方式----- 手动展开[{ align: [] }]
  [{ align: "" }, { align: "center" }, { align: "right" }], // 对齐方式----- 默认展开
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ indent: "-1" }, { indent: "+1" }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{ size: fontSizeStyle.whitelist }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{ font: fonts }], // 字体种类-----[{ font: [] }]
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
  //[{ direction: "ltl" }, { direction: "rtl" }], // 文本方向-----[{'direction': 'ltl'}]  [{'direction': 'rtl'}]
  //[{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ color: [] }, { background: [] }, "blockquote", "clean"], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  // ['blockquote'], //  引用  代码块-----['blockquote', 'code-block']
  // ['clean'], // 清除文本格式-----['clean']
  ["link", "image"], // 链接、图片、视频-----['link', 'image', 'video']
];
export default {
  name: "rm-sendmsginfo",
  props: { getDraft: { type: Boolean, default: true }, receiverObj: { type: Object, default: () => {} } },
  components: {
      quillEditor,
  },
  data() {
      return {
          dialogSelectDraftVisible: false,
          dialogSelectPeopleVisible: false,
          draftTableData: [],
          sendMsgForm: {
              receiver: "",
              receiverid: "",
              title: "",
              content: "",
              msgtype: "01",
              noticeTime: this.$pub.InitDateTime(),
              noticeEndTime: "",
              isCheck: "0",
          },
          treeProps: {
              label: "name",
              children: "children",
              isLeaf: "leaf",
          },
          hospcode: "-1",
          option1: [],
          option2: [],
          fieldname: "",
          renderComponent: true,
          editorOption: {
              placeholder: "请输入内容",
              modules: {
                  toolbar: {
                      container: toolbarOptions, // [["bold", "italic", "underline", "strike"], [{ align: "" }, { align: "center" }, { align: "right" }], [{ list: "ordered" }, { list: "bullet" }], [{ indent: "-1" }, { indent: "+1" }], [{ size: fontSizeStyle.whitelist }], [{ font: fonts }], [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ color: [] }, { background: [] }, "blockquote", "clean"], ["link", "image"]],
                      handlers: {
                          image: function (value) {
                              if (value) {
                                  // 给个点击触发Element-ui，input框选择图片文件
                                  document.querySelector("#quill-upload input").click();
                              } else {
                                  this.quill.format("image", false);
                              }
                          },
                      },
                  },
              },
          },
      };
  },
  created() {
      //回复消息默认带出
      if (!!this.receiverObj) {
          this.sendMsgForm.receiverid = this.receiverObj.userno;
          this.sendMsgForm.receiver = this.receiverObj.username;
          this.sendMsgForm.title = "回复：" + this.receiverObj.msgtitle;
          this.sendMsgForm.noticeTime = this.$pub.InitDateTime();
      }
      this.sendMsgForm.noticeEndTime = "";
  },
  mounted() {},
  updated() {
      window.scrollTo(0, 0);
  },
  methods: {
      sendMsgFunc(isDraft) {
          //校验
          if (!this.sendMsgForm.receiverid && isDraft != "0") {
              return this.$message.error("请选择接收人！");
          }
          if (!this.sendMsgForm.title) {
              return this.$message.error("消息主题不能为空！");
          }
          if (!this.sendMsgForm.content) {
              return this.$message.error("消息内容不能为空！");
          }
          //保存
          this.$tool
              .request({
                  url: "ucent/handlemsg",
                  method: "post",
                  data: {
                      action: "saveMsg",
                      isDraft: isDraft,
                      receiver: this.sendMsgForm.receiverid,
                      title: this.sendMsgForm.title,
                      content: this.sendMsgForm.content,
                      msgtype: this.sendMsgForm.msgtype,
                      noticetime: this.sendMsgForm.noticeTime, //XEUtils.toDateString(this.sendMsgForm.noticeTime, "yyyy-MM-dd"),
                      noticeendtime: this.sendMsgForm.noticeEndTime,
                      ischeck: this.sendMsgForm.isCheck,
                  },
              })
              .then((res) => {
                  if (res.flag == "1") {
                      var msg = "发送成功！";
                      if (isDraft == 0) {
                          msg = "保存成功！";
                      }
                      //清除数据
                      //this.clearMsg();
                      this.cancelSendMsg();
                      //this.dialogSendMsgVisible = false;
                      this.$pub.message(this, msg, "success");
                  } else {
                      this.$message.warning(res.msg);
                  }
              })
              .catch((e) => {
                  this.$message.error(e);
              });
      },
      getRecordDraft() {
          this.$tool
              .request({
                  url: "ucent/handlemsg",
                  method: "post",
                  data: {
                      action: "getDraft",
                  },
              })
              .then((res) => {
                  this.draftTableData = res.Data;
                  this.dialogSelectDraftVisible = true;
              })
              .catch((e) => {
                  this.$message.error(e);
              });
      },
      cancelSendMsg() {
          //this.dialogSendMsgVisible = false;
          this.clearMsg();
          this.$emit("closeSendMsg");
      },
      clearMsg() {
          this.sendMsgForm.receiver = "";
          this.sendMsgForm.receiverid = "";
          this.sendMsgForm.title = "";
          this.sendMsgForm.content = "";
          this.sendMsgForm.msgtype = "01";
          this.sendMsgForm.noticeTime = this.$pub.InitDateTime();
          this.sendMsgForm.isCheck = "0";
      },
      btnSelectPeople() {
          //选人
          this.dialogSelectPeopleVisible = true;
          //默认触发第一级点击事件
          // try {
         
          // this.$nextTick(() => {
          //     document.querySelector(".is-current").firstChild.click();
          // });
          // } catch (e) {
          //     console.log(e);
          // }
      },
      getSelectDraft() {
          var currentrow = this.$refs.draftTable.getCurrentRow();
          if (!!currentrow) {
              this.sendMsgForm.receiver = currentrow.reciever;
              this.sendMsgForm.receiverid = currentrow.reciever;
              this.sendMsgForm.title = currentrow.msgtitle;
              this.sendMsgForm.content = currentrow.msgcontent;
              this.sendMsgForm.msgtype = currentrow.msgtype + "";
              if (currentrow.starttime != "1900-01-01 00:00:00") {
                  this.sendMsgForm.noticeTime = currentrow.starttime;
              }
              //this.sendMsgForm.noticeEndTime = currentrow.noticeEndTime;//草稿的截止时间就不要写上了吧
              this.sendMsgForm.isCheck = currentrow.mustconfirm;
          }
          this.dialogSelectDraftVisible = false;
      },
      cancelSelectDraft() {
          this.dialogSelectDraftVisible = false;
      },
      async loadNode(node, resolve) {
          if (node.level === 0) {
              var data = await this.GetFatherTree(this.hospcode);
              return resolve(data);
          }
          if (node.level === 1) {
              var data = await this.GetSonTree(node.data.hospcode, node);
              return resolve(data);
          }
          if (node.level == 2) {
              var data = await this.GetGrandSonTree(node.data.hospcode, node.data.labdeptcode, node);
              return resolve(data);
          }
          if (node.level > 2) {
              var data = [];
              node.leaf = true;
              node.icon = "el-icon-document-copy";
              return resolve(data);
          }
      },
      async GetFatherTree() {
          //父节点:加载第一级节点
          try {
              let tempNode = [];
              const res = await this.$tool.request({
                  url: "ucent/handlemsg",
                  method: "post",
                  data: {
                      action: "getHospitalOrz",
                      hospcode: this.hospcode,
                  },
              });
              if (res.RData.Data) {
                  res.RData.Data.forEach((item) => {
                      let node = {};
                      node.name = item.hospitalname;
                      node.hospcode = item.hospcode;
                      node.labdeptcode = "";
                      node.labgroupid = "";
                      node.grade = 1;
                      node.icon = "el-icon-house";
                      tempNode.push(node);
                  });
              }
              return tempNode;
          } catch (e) {
              this.$message.warning(e.message);
          }
      },
      async GetSonTree(hospcode, Node) {
          try {
              let tempNode = [];
              const res = await this.$tool.request({
                  url: "ucent/handlemsg",
                  method: "post",
                  data: {
                      action: "getHospitalOrz_child",
                      hospcode: hospcode,
                  },
              });
              if (res.Data) {
                  res.Data.forEach((item) => {
                      let node = {};
                      node.name = item.hospitalname;
                      node.hospcode = item.hospcode;
                      node.labdeptcode = item.labdeptcode;
                      node.labgroupid = "";
                      node.grade = 2;
                      node.icon = "el-icon-place";
                      tempNode.push(node);
                  });
              }
              return tempNode;
          } catch (e) {
              this.$message.warning(e.message);
          }
      },
      async GetGrandSonTree(hospcode, labdeptcode, Node) {
          try {
              let tempNode = [];
              const res = await this.$tool.request({
                  url: "ucent/handlemsg",
                  method: "post",
                  data: {
                      action: "getHospitalOrz_grandchild",
                      hospcode: hospcode,
                      labdeptcode: labdeptcode,
                  },
              });
              if (res.Data) {
                  res.Data.forEach((item) => {
                      let node = {};
                      node.name = item.labgroupname;
                      node.hospcode = item.hospcode;
                      node.labdeptcode = item.labdeptcode;
                      node.labgroupid = item.labgroupid;
                      node.grade = 3;
                      node.icon = "el-icon-place";
                      tempNode.push(node);
                  });
              }
              return tempNode;
          } catch (e) {
              this.$message.warning(e.message);
          }
      },
      changeMsgtype(code, name) {
          this.sendMsgForm.msgtype = code; //val.target.value;
      },
      handleNodeClick(data, node, key) {
          var e = this.sendMsgForm.receiverid;
          this.$tool
              .request({
                  url: "ucent/handlemsg",
                  method: "post",
                  data: {
                      action: "getPeopleOption",
                      grade: node.data.grade,
                      hospcode: node.data.hospcode,
                      labdeptcode: node.data.labdeptcode,
                      labgroupid: node.data.labgroupid,
                  },
              })
              .then((res) => {
                  if (res.Data) {
                      this.renderComponent = false;
                      let temp = XEUtils.clone(res.Data, true);
                      this.option1 = [];
                      // this.option2 = [];
                      // if (e != "") {
                      //     let k = e.split(",");
                      //     k.forEach((item) => {
                      //         let ndata = temp.find((m) => m.data == item);
                      //         if (ndata != undefined && ndata != null) {
                      //             this.option2.push(ndata);
                      //         }
                      //     });
                      //     temp.forEach((item) => {
                      //         if (k.indexOf(item.data + "") < 0) {
                      //             this.option1.push(item);
                      //         }
                      //     });
                      // } else {
                      //     this.option1 = temp;
                      // }
                      this.option1 = temp;
                      this.fieldname = "sendMsgForm.receiver";
                      this.$nextTick(() => {
                          this.renderComponent = true;
                      });
                  }
              })
              .catch((e) => {
                  this.$message.error(e);
              });
      },
      closedialog(value, kdata, name) {
          if (value != "close") {
              this.sendMsgForm.receiver = name;
              this.sendMsgForm.receiverid = value;
          }
          this.dialogSelectPeopleVisible = false;
      },
      // 将图片上传到服务器，返回地址替换到md中
      $imgAdd(content) {
          let quill = this.$refs.myQuillEditor.quill;
          var formdata = new FormData();
          formdata.append("action", "msgimgupload");
          formdata.append("file", content.file);
          this.$pub.imgupload(this, formdata, quill);
      },
      // $imgAdd(pos, $file) {
      //     //上传图片
      //     //let $vm = this.$refs.md;
      //     //const formData = new FormData();
      //     var formdata = new FormData();
      //     let that = this;
      //     // 压缩图片
      //     if ($file.type.indexOf("image") === 0) {
      //         let reader = new FileReader(),
      //             img = new Image();
      //         reader.readAsDataURL($file);
      //         reader.onload = function (e) {
      //             img.src = e.target.result;
      //         };
      //         img.onload = function () {
      //             // 缩放图片需要的canvas（也可以在DOM中直接定义canvas标签，这样就能把压缩完的图片不转base64也能直接显示出来）
      //             let canvas = document.createElement("canvas");
      //             let context = canvas.getContext("2d");

      //             // 图片原始尺寸
      //             let originWidth = this.width;
      //             let originHeight = this.height;

      //             // 最大尺寸限制，可通过设置宽高来实现图片压缩程度
      //             let maxWidth = 800,
      //                 maxHeight = 800;
      //             // 目标尺寸
      //             let targetWidth = originWidth,
      //                 targetHeight = originHeight;
      //             // 图片尺寸超过800x800的限制
      //             if (originWidth > maxWidth || originHeight > maxHeight) {
      //                 if (originWidth / originHeight > maxWidth / maxHeight) {
      //                     // 更宽，按照宽度限定尺寸
      //                     targetWidth = maxWidth;
      //                     targetHeight = Math.round(maxWidth * (originHeight / originWidth));
      //                 } else {
      //                     targetHeight = maxHeight;
      //                     targetWidth = Math.round(maxHeight * (originWidth / originHeight));
      //                 }
      //             }
      //             // canvas对图片进行缩放
      //             canvas.width = targetWidth;
      //             canvas.height = targetHeight;
      //             // 清除画布
      //             context.clearRect(0, 0, targetWidth, targetHeight);
      //             // 图片压缩
      //             context.drawImage(img, 0, 0, targetWidth, targetHeight);
      //             /*第一个参数是创建的img对象；第二三个参数是左上角坐标，后面两个是画布区域宽高*/

      //             //压缩后的图片转base64 url
      //             /*canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/png';
      //              * qualityArgument表示导出的图片质量，只有导出为jpeg和webp格式的时候此参数才有效，默认值是0.92*/
      //             let newUrl = canvas.toDataURL("image/jpeg", 0.9); //base64 格式

      //             // base64 转 blob 再转 file
      //             let arr = newUrl.split(","),
      //                 mime = arr[0].match(/:(.*?);/)[1], // 去掉url的头，并转化为byte
      //                 bstr = atob(arr[1]), // 处理异常,将ascii码小于0的转换为大于0
      //                 n = bstr.length,
      //                 u8arr = new Uint8Array(n);
      //             while (n--) {
      //                 u8arr[n] = bstr.charCodeAt(n);
      //             }
      //             // 转blob
      //             let filename = Date.parse(new Date()) + ".jpeg";
      //             // 转file
      //             let file = new File([u8arr], filename, { type: mime });

      //             // 将图片上传到服务器
      //             // formData.append("file", file);
      //             // axios({
      //             //     url: "http://localhost:9090/file/upload",
      //             //     method: "post",
      //             //     data: formData,
      //             //     headers: { "Content-Type": "multipart/form-data" },
      //             // }).then((res) => {
      //             //     // 将返回的url替换到文本原位置![...](./0) -> ![...](url)
      //             //     $vm.$img2Url(pos, res.data);
      //             // });
      //             formdata.append("action", "msgimgupload");
      //             formdata.append("file", file);
      //             that.$pub.imgupload(that, formdata, pos, "refmsgcontent");
      //         };
      //     }
      // },
  },
};
</Script>

<style scoped>
.pagetop {
  background-color: #f55d54;
  width: 100%;
  height: 45px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 99;
}

.pagecenter {
  position: absolute;
  top: 50px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}

.middle-center {
  background-color: blueviolet;
  position: absolute;
  height: 100%;
  left: 0px;
  right: 505px;
  overflow: auto;
}

.middle-right {
  background-color: chartreuse;
  position: absolute;
  height: 100%;
  width: 500px;
  right: 0px;
}

.middle-left {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 400px;
  left: 0px;
}

.pagebottom {
  width: 100%;
  height: 30px;
  bottom: 0px;
  top: 405px;
  position: absolute;
  z-index: 99;
}
table tr td {
  padding: 2px;
}
</style>
<style lang="scss">
em {
  font-style: italic; /* 解决斜体失效问题 */
}

.vue-quill-editor {
  .quill-editor {
    line-height: normal;

    .ql-container.ql-snow {
      line-height: normal !important;
      height: 250px !important;
      font-size: 14px;
    }

    .ql-snow {
      .ql-tooltip[data-mode="link"]::before {
        content: "请输入链接地址:";
      }

      .ql-tooltip.ql-editing a.ql-action::after {
        border-right: 0px;
        content: "保存";
        padding-right: 0px;
      }

      .ql-tooltip[data-mode="video"]::before {
        content: "请输入视频地址:";
      }

      .ql-picker.ql-size {
        .ql-picker-label[data-value="12px"]::before,
        .ql-picker-item[data-value="12px"]::before {
          content: "12px";
        }
        .ql-picker-label[data-value="14px"]::before,
        .ql-picker-item[data-value="14px"]::before {
          content: "14px";
        }
        .ql-picker-label[data-value="16px"]::before,
        .ql-picker-item[data-value="16px"]::before {
          content: "16px";
        }
        .ql-picker-label[data-value="18px"]::before,
        .ql-picker-item[data-value="18px"]::before {
          content: "18px";
        }
        .ql-picker-label[data-value="20px"]::before,
        .ql-picker-item[data-value="20px"]::before {
          content: "20px";
        }
        .ql-picker-label[data-value="24px"]::before,
        .ql-picker-item[data-value="24px"]::before {
          content: "24px";
        }
        .ql-picker-label[data-value="28px"]::before,
        .ql-picker-item[data-value="28px"]::before {
          content: "28px";
        }
        .ql-picker-label[data-value="32px"]::before,
        .ql-picker-item[data-value="32px"]::before {
          content: "32px";
        }
        .ql-picker-label[data-value="36px"]::before,
        .ql-picker-item[data-value="36px"]::before {
          content: "36px";
        }
      }

      .ql-picker.ql-header {
        .ql-picker-label::before,
        .ql-picker-item::before {
          content: "文本";
        }
        .ql-picker-label[data-value="1"]::before,
        .ql-picker-item[data-value="1"]::before {
          content: "标题1";
        }
        .ql-picker-label[data-value="2"]::before,
        .ql-picker-item[data-value="2"]::before {
          content: "标题2";
        }
        .ql-picker-label[data-value="3"]::before,
        .ql-picker-item[data-value="3"]::before {
          content: "标题3";
        }
        .ql-picker-label[data-value="4"]::before,
        .ql-picker-item[data-value="4"]::before {
          content: "标题4";
        }
        .ql-picker-label[data-value="5"]::before,
        .ql-picker-item[data-value="5"]::before {
          content: "标题5";
        }
        .ql-picker-label[data-value="6"]::before,
        .ql-picker-item[data-value="6"]::before {
          content: "标题6";
        }
      }

      .ql-picker.ql-font {
        .ql-picker-label[data-value="SimSun"]::before,
        .ql-picker-item[data-value="SimSun"]::before {
          content: "宋体";
          font-family: "SimSun" !important;
        }
        .ql-picker-label[data-value="SimHei"]::before,
        .ql-picker-item[data-value="SimHei"]::before {
          content: "黑体";
          font-family: "SimHei";
        }
        .ql-picker-label[data-value="Microsoft-YaHei"]::before,
        .ql-picker-item[data-value="Microsoft-YaHei"]::before {
          content: "微软雅黑";
          font-family: "Microsoft YaHei";
        }
        .ql-picker-label[data-value="KaiTi"]::before,
        .ql-picker-item[data-value="KaiTi"]::before {
          content: "楷体";
          font-family: "KaiTi" !important;
        }
        .ql-picker-label[data-value="FangSong"]::before,
        .ql-picker-item[data-value="FangSong"]::before {
          content: "仿宋";
          font-family: "FangSong";
        }
      }
    }

    .ql-align-center {
      text-align: center;
    }

    .ql-align-right {
      text-align: right;
    }

    .ql-align-left {
      text-align: left;
    }
  }

  .ql-snow .ql-picker.ql-size {
    width: 58px;
  }

  .ql-snow .ql-picker.ql-font {
    width: 80px;
  }

  .ql-snow .ql-picker.ql-header {
    width: 58px;
  }

  .ql-snow .ql-picker {
    font-size: 13px;
  }
}
</style>

